<template>
	<view>
		<view class="none" v-if="isPage">没有内容</view>
		<view v-else>
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="itemTitle">{{item.title ? item.title :'无标题'}}</view>
				<view class="itemContent" v-html="item.content"></view>
				<view class="itemInfos">
					<view class="itemInfos-left"><text>{{item.nicheng}}</text><text>{{item.time}}</text></view>
					<view class="itemInfos-right">
						<text @tap.stop="delArt(item.article_id,index)">删除</text>
						<text @tap.stop="changeArt(item)">发布</text>
					</view>
				</view>
			</view>
			<uni-load-more v-if="list.length >= 6" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import util from '@/common/util.js';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				list: [],
				page: 1,
				reload: true,
				isPage: false, //是否为空列表
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.isPage = false;
			this.list = [];
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList();
			}, 500);
		},
		onShow() {
			this.page = 1;
			this.reload = true;
			this.isPage = false;
			this.list = [];
			this.getList();
		},
		methods: {
			// 获取列表
			getList() {
				this.$api.apiPost('user/article.Lists/articleList', {
					users_type: 1,
					is_draft: 2,
					is_user: 1,
					page: this.page,
					pagesize: 8
				}).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						list = util.artHandle(list,'drafts');
						list.forEach((item) => {
							item['time'] = util.getLeftTime(item.creat_time);
							if (item.content) {
								var imgReg = /<img[^>]*src[=\"\'\s]+[^\/]+\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi; //搜索img标签
								var videoReg = /<video[^>]*src[=\"\'\s]+[^\/]+\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi; //搜索video标签
								item.content = item.content.replace(imgReg,"[图片]");
								item.content = item.content.replace(videoReg,"[视频]");
							} else {
								item.content = '无内容';
							}
							this.$forceUpdate();
						})
						this.list = this.reload ? list : this.list.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.list = [];
							this.isPage = true;
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			// 删除文章
			delArt(id, index) {
				var _this = this;
				uni.showModal({
					confirmColor: '#00D5A2',
					title: '删除提示',
					content: '删除当前草稿将无法恢复,确定删除吗?',
					success: function(res) {
						if (res.confirm) {
							_this.$api.apiPost('user/article.Users/delArticle', {
								article_id: id
							}).then(res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								if (res.data.code == 200) {
									_this.list.splice(index, 1);
								}
							})
						}
					}
				})
			},
			// 发布文章
			changeArt(item) {
				uni.navigateTo({
					url: '/pages/articleModule/newarticle-release?type=draft&article_id=' + item.article_id
				})
			}
		}
	}
</script>

<style>
	page {
		width: calc(100% - 60upx);
		margin: auto;
	}

	.none {
		color: #333333;
		font-size: 30upx;
		margin-top: 500upx;
		width: 100%;
		text-align: center;
	}

	.item {
		width: 100%;
		padding: 40upx 0 60upx;
		border-top: 2upx solid #DCDFE6;
	}

	.item:first-child {
		border: none;
	}

	.itemTitle {
		font-size: 34upx;
		font-weight: 500;
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		word-break: break-word;
	}

	.itemContent {
		color: #333333;
		font-size: 30upx;
		line-height: 20px;
		max-height: 40px;
		margin: 30upx 0 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		word-break: break-word;
	}

	.itemInfos {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.itemInfos-left,
	.itemInfos-right {
		display: flex;
		align-items: center;
		font-size: 26upx;
		width: 50%;
	}

	.itemInfos-left text:first-child,
	.itemInfos-right text:first-child {
		margin-right: 30upx;
		max-width: calc(100% - 180upx);
	}

	.itemInfos-left text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.itemInfos-right text:first-child {
		color: #F56C6C;
	}

	.itemInfos-left {
		color: #C0C4CC;
	}

	.itemInfos-right {
		color: #00D5A2;
		justify-content: flex-end;
	}
</style>
